<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选|反选</title>
	</head>
	<body>
		<input type="checkbox" id="all"/>全选<br> 
		<hr>
		<input type="checkbox" class="box" />电脑<br> 
		<input type="checkbox" class="box" />手机<br>
        <input type="checkbox" class="box"/>电视<br>
        
        <script type="text/javascript">
        	var all=document.getElementById('all');
        	var box=document.getElementsByClassName('box');
        	//全选框添加点击事件
        	/*all.onclick=function(){
        		for(var i=0;i<box.length;i++){
        			//方式1
        			//box[i].checked=all.checked
        	        //方式2：事情默认都会有一个事情对象even，event.target表示触发事情的对象本身
        		  box[i].checked=event.target.checked;
        		}
        	}*/
        	//事件监听式：点击all 执行myfun这个函数
        	all.addEventListener('click',myfun,false);
        	function myfun(){
        		for(var i=0;i<box.length;i++){
        			box[i].checked=event.target.checked;
        		}
        	}
        </script>
	</body>
</html>
